<template>
  <div>
    <div class="nogoods" v-if="dataList.length == 0">
      <div class="cont" v-if="isNone">
        <img src="../assets/img/gift.png" alt="" style="width: 24vw;">
        <p style="color: #fff;font-size: 12px;margin-top: 1vw;letter-spacing: 1px;text-align: center;text-indent: -1.5vw">当前暂无活动</p>
      </div>
    </div>
    <div v-else class="numLimit" style="width: 100vw;height: 100vh;background: #FC6284;position:relative;z-index: 9999;">
      <pull-to
        :bottom-load-method="infiniteHandler"
        :is-top-bounce=false
        :bottom-config="BOTTOM_DEFAULT_CONFIG">
        <div class="banner">
          <van-swipe :autoplay="3000">
            <van-swipe-item>
              <img src="../assets/img/numBanner.png" alt="" @click="test">
            </van-swipe-item>
          </van-swipe>
        </div>

        <van-tabs swipeable height="11vw"
                  v-model="value">
          <van-tab v-for="(v,index) in dataList" :key="index" v-if="index<=3">
            <div slot="title" style="color: #999;font-size: 16px;padding-top:0px;-webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;box-sizing: border-box;">
              {{v.start_time}}<br/>
              <div v-if="index == value">
                <div v-if="v.limit_status == 1">
                  <span style="color: #645DE9;font-size: 12px;margin-top: -23px" v-if="v.is_vip !== 0 && v.begin_time>v.now_time">会员优先抢</span>
                  <span style="color: #645DE9;font-size: 12px;margin-top: -23px" v-else>正在抢购</span>
                </div>
                <!-- <span style="color: #645DE9;font-size: 12px;margin-top: -23px" v-if="v.limit_status == 1 && v.is_vip !== 0 && v.begin_time<v.now_time">会员优先抢</span>
                 <span style="color: #645DE9;font-size: 12px;margin-top: -23px" v-else-if="v.limit_status == 1">正在抢购</span>-->
                <span style="color: #645DE9;font-size: 12px;margin-top: -23px" v-else>即将开始</span>
              </div>
              <div v-else>
                <span style="color: #999;font-size: 12px;margin-top: -23px">{{v.limit_name}}</span>
              </div>
            </div>
            <div class="contents">
              <p class="tiqianOne" style="font-size: 16px;color: #fff;text-align: center;line-height: 6vw;position: relative;top: 2vw;">会员提前一小时开始抢购</p>
              <div class="time">
                <p v-if="v.limit_status == 1">结束倒计时：
                  <span>{{timeNew.day}}</span>天
                  <span>{{timeNew.hour}}</span>时
                  <span>{{timeNew.min}}</span>分
                  <span>{{timeNew.sec}}</span>秒
                </p>
                <p v-if="v.limit_status == 0">开始倒计时：
                  <span>{{timeOld.day}}</span>天
                  <span>{{timeOld.hour}}</span>时
                  <span>{{timeOld.min}}</span>分
                  <span>{{timeOld.sec}}</span>秒
                </p>
              </div>
              <div class="goods" v-for="(g, i) in goodsList" :key="i"  @click="drop(g)">
                <div class="left">
                  <img :src=g.thum_img alt="">
                  <div style="width: 26.67vw;height: 26.67vw;background: rgba(0,0,0,.3)
                ;position:relative;top: -26.67vw;left: 3.7vw;" v-if="g.percent_sales == 100">
                    <img src="../assets/img/none.png" style="position:relative;top: 6.33vw;
                  width: 75%;height: 58%;" alt="">
                  </div>
                  <div style="width: 26.67vw;height: 26.67vw;background: rgba(0,0,0,.3)
                ;position:relative;top: -26.67vw;left: 3.7vw;" v-if="g.status == 3">
                    <img src="../assets/img/done.png" style="position:relative;top: 6.33vw;
                  width: 75%;height: 58%;" alt="">
                  </div>
                </div>
                <div class="right">
                  <p class="goodName">{{g.good_name}}</p>
                  <p style="font-size: 14px;color: #ff0000;" class="price">￥{{g.sell_price}}元
                    <span style="font-size: 11px;color: #999;text-decoration: line-through;margin-left: 2.67vw">{{g.market_price}}元</span>
                  </p>
                  <div v-if="v.limit_status== 1">

                    <div class="btn" v-if="g.percent_sales == 100">
                      <span style="background: #a5a5a5;box-shadow:0 0 2.67vw #a5a5a5">已抢光</span>
                    </div>
                    <div class="btn" v-else>
                      <span style="background: #FF5A69;box-shadow:0 0 2.67vw #FF5A69">立即抢购</span>
                    </div>
                  </div>

                  <div class="btn" v-if="v.limit_status== 0">
                    <span style="background: #FF9FA8;box-shadow:0 0 2.67vw #FF9FA8">等待开抢</span>
                  </div>

                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </pull-to>
    </div>
  </div>
</template>

<script>
  import request from '../request/index'
  import PullTo from 'vue-pull-to'
  export default {
    name: "timeLimit",
    components: {PullTo},
    data(){
      return{
        isLoading: false,
        dataList:[],
        active2:0,
        beginTime:'',
        endTime:'',
        value:'',
        token:'',
        isNone:false,
        goodsList:[],
        limit_id:0,
        group_id:0,
        join_id:0,
        type:3,
        limitType:2,
        page:1,
        limitId:'',
        goodsMes:[],
        activity_id:0,
        platform:this.$route.query.version,
        timeNew: {
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        timeOld:{
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
        },
      }
    },
    watch:{
      value(newVal,oldVal){
        this.dataList.forEach((value,index)=> {
          if (index == newVal){
            this.beginTime = value.begin_time;
            this.endTime = value.end_time;
            this.limitId = value.limit_id;
            request.limitGoods(this,this.limitId);
          }
        })
      }
    },
    updated(){
      this.haveBegin;
      this.notBegin;
    },
    methods:{
      test(){
        /* if (this._globe.isIos) {
           if (window.webkit) {
             window.webkit.messageHandlers.callUserInfo.postMessage({type:this.type});
           }
         }*/
      },
      /* getToken(json){
         this.token = JSON.parse(json).token;
       },*/
      infiniteHandler:function(loaded){
        if(this.page<=this.goodsMes.all_page){
          request.loadedNewLimitGoods(this,loaded,this.limitId)
        }else{
          this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
          loaded("done");
          this.loaded = true;
        }
      },
      drop(g){
        var ua = window.navigator.userAgent.toLowerCase();
        if (this._globe.isAndroid) {
          if (window.android != null && typeof window.android != "undefined") {
              window.android.openGoods(this.type,g.goods_id,this.join_id,g.limit_id,g.group_id,this.activity_id);
          } else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+g.goods_id+'&join_id='+this.join_id+'&limit_id='+g.limit_id+'&group_id='+this.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          }else{
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:g.limit_id,group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }else if (this._globe.isIos) {
          if (window.webkit) {
              window.webkit.messageHandlers.openGoods.postMessage(
                {type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:g.limit_id,
                  group_id:this.group_id,activity_id:this.activity_id});//
            /* window.webkit.messageHandlers.callAppHelp.postMessage(num)*/
          }else if (ua.match(/MicroMessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+g.goods_id+'&join_id='+this.join_id+'&limit_id='+g.limit_id+'&group_id='+this.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          } else {
            this.$router.push({
              path:'detail',query:{type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:g.limit_id,group_id:this.group_id,activity_id:this.activity_id}
            })
          }
        }
      }
    },
    computed:{
      haveBegin: function () {
        var that = this;
        setInterval(function () {
          var dateEnd = new Date(that.endTime*1000);
          that.dateNow = new Date();
          var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
          if (surplusTime<0) {
            that.timeNew.day = 0;
            that.timeNew.hour = 0;
            that.timeNew.min = 0;
            that.timeNew.sec = 0;
          }else{
            that.timeNew.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeNew.hour = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeNew.min = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600) / 1000 / 60);
            that.timeNew.sec = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600 - that.timeNew.min * 1000 * 60) / 1000)

          }
        }, 200)
      },
      notBegin: function () {
        var that = this;
        setInterval(function () {
          var dateBegin = new Date(that.beginTime*1000);
          that.dateNow = new Date();
          var surplusTime = dateBegin.getTime() - that.dateNow.getTime();
          if (surplusTime<0) {
            that.timeOld.day = 0;
            that.timeOld.hour = 0;
            that.timeOld.min = 0;
            that.timeOld.sec = 0;
          }else{
            that.timeOld.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeOld.hour = Math.floor((surplusTime - that.timeOld.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeOld.min = Math.floor((surplusTime - that.timeOld.day * 1000 * 24 * 3600 - that.timeOld.hour * 1000 * 3600) / 1000 / 60);
            that.timeOld.sec = Math.floor((surplusTime - that.timeOld.day * 1000 * 24 * 3600 - that.timeOld.hour * 1000 * 3600 - that.timeOld.min * 1000 * 60) / 1000)

          }
        }, 200)
      },
    },
    created(){
      request.purchaseLimit(this,this.limitType);
    },
    mounted(){
      window.openGoods= this.drop();
      window.webkit.openGoods= this.drop();
    }

  }
</script>

<style scoped lang="scss">
  @media screen and (min-width: 410px) and (max-width: 415px){
    .tiqianOne{
      top: 5vw !important;
    }
    .contents{
      margin-top: 4vw !important;
    }
  }
  @media screen and (min-width: 375px) and (max-width: 410px){
    top: 6vw !important;
  }
  .nogoods{
    width: 100vw;
    height:100vh;
    background:url("../assets/img/gz.png");
    position: relative;
    .cont{
      width: 28vw;
      height: 30vw;
      display: inline-block;
      margin: 0px auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      top: -44vw;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 375px){
    .contents .time p span{
      top: .2vw !important;
    }
  }
  @media screen and (min-width: 360px) and (max-width: 375px){
    .contents .time p span{
      top: -.1vw !important;
    }
    /*.contents .goods .right .goodName{
      height: 13vw !important;
    }*/
  }
  @media screen and (min-width: 400px) and (max-width: 414px){
    /* .contents .goods .right .goodName{
       height: 11vw !important;
     }*/
  }
  @media screen and (min-width: 375px){
    .contents .time p span{
      top: 0vw !important;
    }
    .price{
      margin-top: .8vw;
    }
    /* .contents .goods .right .goodName{
       height: 12vw !important;
     }*/
  }
  @media screen and (min-width: 414px){
    /*.contents .goods .right .goodName{
      height: 11vw !important;
    }*/
  }
  .top{
    width: 100vw;
    height:70px;
    background: #FC6284;
    position: fixed;
    opacity: 0;
    top: 0px;
    z-index: 9999;
  }
  .banner{
    width: 100vw;
    height: 56.8vw;
    img{
      width: 100%;
    }

  }
  .contents{
    width: 100vw;
    height: auto;
    background:#FC6284;
    background-image: url("../assets/img/gz.png");
    position: relative;
    z-index: 9999;
    margin-top: 10vw;
    padding-bottom: 4vw;
    .time{
      font-size: 13px;
      color: #fff;
      padding-top: 8vw;
      margin-bottom: -3vw;
      p{
        text-align: center;
        span{
          width: 5.3vw;
          height: 5.3vw;
          line-height: 5.3vw;
          background-color: #fff;
          display: inline-block;
          border-radius: 1vw;
          margin-left: 3vw;
          margin-right: 2vw;
          position: relative;
          top: 1vw;
          color:#FF5A69;
        }
      }
    }
    .goods{
      width: 92vw;
      height: 38vw;
      background: #fff;
      margin: 0px auto;
      margin-top: 6.13vw;
      border-radius: 2.67vw;
      padding-top: 5vw;
      .right{
        width: 53.07vw;
        height: 32vw;
        float: right;
        margin-right: 4vw;
        .goodName{
          font-size: 14px;
          color: #333;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp:2;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 13vw;
          line-height: 6.5vw;
          /*height: 13vw;*/
        }
        .btn{
          width:26.67vw;
          height: 8vw;
          float: right;
          span{
            width: 100%;
            height: 100%;
            border-radius: 4vw;
            display: inline-block;
            font-size: 13px;
            color: #fefefe;
            text-align: center;
            line-height: 8vw;
            margin-top: 2.67vw;
          }
        }
      }
      .left{
        float: left;
        width: 26.67vw;
        height: 26.67vw;
        img{
          width: 100%;
          height: 100%;
          margin-left: 3.7vw;
        }
      }
      .groupNum{
        width:20vw ;
        height: 6.67vw;
        background: #FC6284;
        border-radius:1.33vw ;
        margin: 0px auto;
        position: relative;
        top: -2.3vw;
        .person{
          width:3.7vw;
          height: 2.67vw;
          display: inline-block;
          margin-left: 3vw;
        }
      }
    }
  }
</style>
<style lang="scss">
  .numLimit{
  .van-tabs--line .van-tabs__wrap{
    background: #fff;
  }
  .van-tab--active div, .van-tab--active span{
    color:#FC6284 !important;
  }
  .van-tabs__line{
    display: none;
  }
  .van-tabs--line .van-tabs__wrap {
    height: 14vw;
  }
  .van-tabs__wrap{
    z-index: 10000 !important;
  }
  @media screen and (min-width: 320px) and (max-width: 375px){
    .van-tabs--line .van-tabs__wrap {
      height: 18vw !important;
    }
  }
  }

</style>
